<template>
  <div>
    <navbar bold title="Toast 轻提示"/>
    <toast
        :show="show"
        :position="position"
    />
    <w-button @click="showToast(0)">默认Toast</w-button>
    <w-button @click="showToast(1)">上方Toast</w-button>
    <w-button @click="showToast(2)">下方Toast</w-button>
  </div>
</template>

<script>
import Toast from "@/components/toast/toast";
import Navbar from "@/components/navbar/navbar";
import WButton from "@/components/button/button";

export default {
  name: "test-toast",
  components: {WButton, Navbar, Toast},
  data() {
    return {
      show: false,
      position: 'normal',

    }
  },
  methods: {
    showToast(type) {
      if (type === 0) {
        this.position = 'normal'
      } else if (type === 1) {
        this.position = 'top'
      } else if (type === 2) {
        this.position = 'bottom'
      }
      this.show = true
      setTimeout(() => {
        this.show = false
      }, 1000)
    }
  }
}
</script>

<style scoped>

</style>